{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青啤二厂WMS实时叫料任务</title>
    <link href="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <style>
        body {
            background: linear-gradient(135deg, #f0f4f8 0%, #e6f0ff 100%);
            font-family: "Microsoft YaHei", sans-serif;
            min-height: 100vh;
            padding: 20px;
        }

        .header-container {
            background: linear-gradient(to right, #004a7c, #0066cc);
            color: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 25px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
            position: relative;
            overflow: hidden;
        }

        .header-container::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            pointer-events: none;
        }

        .card {
            border-radius: 12px;
            border: none;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease;
            background: rgba(255, 255, 255, 0.95);
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-header {
            background: linear-gradient(to right, #f8f9fa, #e9ecef);
            padding: 15px 20px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-weight: 600;
            color: #333;
        }

        .status-badge {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-align: center;
            display: inline-block;
        }

        .status-created {
            background-color: #6c757d;
            color: white;
        }

        .status-in-progress {
            background-color: #ffc107;
            color: #333;
        }

        .status-completed {
            background-color: #28a745;
            color: white;
        }

        .table-container {
            overflow-x: auto;
            border-radius: 0 0 12px 12px;
        }

        .custom-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .custom-table th {
            background: linear-gradient(to bottom, #f1f5f9, #e2e8f0);
            padding: 15px 12px;
            font-weight: 600;
            color: #334155;
            border-bottom: 2px solid #cbd5e1;
            position: sticky;
            top: 0;
        }

        .custom-table td {
            padding: 14px 12px;
            border-bottom: 1px solid #e2e8f0;
            vertical-align: middle;
            background-color: white;
        }

        .custom-table tr:last-child td {
            border-bottom: none;
        }

        .custom-table tr:hover td {
            background-color: #f8fafc;
        }

        .custom-table tr:first-child td:first-child {
            border-top-left-radius: 8px;
        }

        .custom-table tr:first-child td:last-child {
            border-top-right-radius: 8px;
        }

        .custom-table tr:last-child td:first-child {
            border-bottom-left-radius: 8px;
        }

        .custom-table tr:last-child td:last-child {
            border-bottom-right-radius: 8px;
        }

        .time-display {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 30px;
            font-size: 1.1rem;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            display: inline-flex;
            align-items: center;
            gap: 10px;
            backdrop-filter: blur(5px);
        }

        .refresh-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #4b5563;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
        }

        .stats-container {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .stat-card {
            flex: 1;
            min-width: 180px;
            background: white;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1e40af;
            margin: 5px 0;
        }

        .stat-label {
            font-size: 0.95rem;
            color: #64748b;
        }

        .progress-container {
            background: #e2e8f0;
            height: 6px;
            border-radius: 3px;
            margin-top: 10px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            border-radius: 3px;
        }

        .created-bar {
            background-color: #6c757d;
            width: 20%;
        }

        .in-progress-bar {
            background-color: #ffc107;
            width: 55%;
        }

        .completed-bar {
            background-color: #28a745;
            width: 25%;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 10px;
        }

        .logo {
            height: 50px;
            background: white;
            padding: 5px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

        .logo-text {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: 1px;
        }

        @media (max-width: 768px) {
            .header-container {
                padding: 15px;
            }

            .logo-container {
                flex-direction: column;
                text-align: center;
            }

            .stat-card {
                min-width: 100%;
            }

            .custom-table th, .custom-table td {
                padding: 10px 8px;
                font-size: 0.9rem;
            }

            .status-badge {
                padding: 4px 10px;
                font-size: 0.8rem;
            }
        }
    </style>

</head>
<body >
    <div class="header-container">
        <div class="logo-container">

            <div class="logo-text">青啤二厂包材看板任务系统</div>

            <div class="d-flex justify-content-center mt-3 ms-auto">
                <div class="time-display ">
                <i class="bi bi-clock"></i>
                <span id="current-time">2025-06-18 14:30:45 星期三</span>
            </div>

            </div>
            <div class="card-header d-flex justify-content-between align-items-center mt-3 d-none">
                <span class="text-muted" style="font-size: 0.9rem;">数据更新时间: <span id="update-time"></span></span>
            </div>
        </div>


    </div>

    <div class="stats-container"></div>
    <div class="card">

        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>任务类型</th>
                        <th>任务状态</th>
                        <th>产线</th>
                        <th>物品编码</th>
                        <th>物品名称</th>
                        <th>包装名称</th>
                        <th>需求数</th>
                        <th>已发数</th>
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tbody>
                {% for task in screen_data %}
                  <tr >
                     <td class="status-cell">{{ task.任务类型 }}</td>
                      <td><span class="status-badge status-in-progress">{{ task.任务状态 }}</span></td>
                      <td class="status-cell">{{ task.产线 }}</td>
                      <td class="status-cell">{{ task.物料编码 }}</td>
                      <td class="status-cell">{{ task.物品名称 }}</td>
                      <td class="status-cell">{{ task.包装名称 }}</td>
                      <td class="status-cell">{{ task.需求数 }}</td>
                      <td class="status-cell">{{ task.已发数 }}</td>
                      <td class="status-cell">{{ task.创建时间 }}</td>
                  </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="refresh-indicator">
            <i class="bi bi-arrow-clockwise"></i>
            <span>页面将在 <span id="countdown">60</span> 秒后自动刷新</span>
        </div>
    </div>


    <!-- 引入 JS -->
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js' %}"></script>

    <!-- 自动刷新（每分钟刷新一次） -->
    <script>
        function updateCurrentTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const weekday = weekdays[now.getDay()];

            const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekday}`;
            document.getElementById('current-time').textContent = timeString;

            // 更新时间部分
            const updateTimeString = `${hours}:${minutes}:${seconds}`;
            document.getElementById('update-time').textContent = updateTimeString;
        }

        // 倒计时刷新功能
        let countdown = 10;
        function updateCountdown() {
            countdown--;
            if (countdown <= 0) {
                countdown = 10;
                // 实际项目中这里应该调用 location.reload();
                // 这里为了演示，只更新表格数据
                updateTableData();
            }
            document.getElementById('countdown').textContent = countdown;
        }

        // 模拟表格数据更新
        function updateTableData() {
            const statuses = ['status-created', 'status-in-progress', 'status-completed'];
            const statusText = ['待处理', '进行中', '已完成'];

            // 更新表格中的部分数据
            $('tbody tr').each(function() {
                const randomIdx = Math.floor(Math.random() * 3);
                const statusCell = $(this).find('td:nth-child(2)');

                // 更新状态
                statusCell.find('.status-badge')
                    .removeClass('status-created status-in-progress status-completed')
                    .addClass(statuses[randomIdx])
                    .text(statusText[randomIdx]);

                // 更新已发数（如果是进行中状态）
                if (randomIdx === 1) {
                    const demandCell = $(this).find('td:nth-child(7)');
                    const sentCell = $(this).find('td:nth-child(8)');
                    const demand = parseInt(demandCell.text());
                    const currentSent = parseInt(sentCell.text());
                    const newSent = Math.min(demand, currentSent + Math.floor(Math.random() * 10) + 5);
                    sentCell.text(newSent);

                    if (newSent === demand) {
                        statusCell.find('.status-badge')
                            .removeClass('status-in-progress')
                            .addClass('status-completed')
                            .text('已完成');
                    }
                }
            });

            // 更新更新时间
            updateCurrentTime();
        }

        // 初始调用
        updateCurrentTime();

        // 每秒更新时间
        setInterval(updateCurrentTime, 1000);

        // 每秒更新倒计时
        setInterval(updateCountdown, 1000);
    </script>
</body>
</html>